<template>
  <div class="pro-list">
    <router-link :to="{name:'lotDetail',query:{lotId:pro.id,shopId:pro.shopId}}"  class="pro-box" v-for="(pro,k) in productList" :key="k">
      <div ref="proImg" class="pro-img" :style="'backgroundImage: url('+(pro.smImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.smImageUrl : resUrl+pro.smImageUrl)+')'">
        <!--<img :src="pro.smImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.smImageUrl : resUrl+pro.smImageUrl" alt="">-->
        <span class="tag" v-if="pro.type==4">藏品</span>
        <span class="tag" style="background-color: rgba(0,0,0,0.6);" v-else-if="pro.status==deal">已成交</span>
        <span class="tag" v-else-if="pro.status==release&&pro.startTime<pro.timestamp&&pro.timestamp<pro.endTime">竞拍中</span>
        <span class="tag" style="background-color: #FFA600" v-else-if="pro.status==release&&pro.startTime>pro.timestamp">预展中</span>

        <span class="tag" style="background-color: rgba(0,0,0,0.6);" v-else-if="pro.status==release">已结拍</span>

        <span class="tag" style="background-color: rgba(0,0,0,0.6);" v-else>已成交</span>

      </div>
      <div class="pro-body">
        <p class="pro-title">{{pro.name}}</p>
        <p class="pro-price" v-if="pro.type!=fixedPrice">￥{{pro.currentPrice | toDecimal}}</p>
        <p class="pro-price" v-if="pro.type==fixedPrice">￥{{pro.fixedPrice | toDecimal}}</p>
        <!--<p class="pro-time" v-if="pro.status==12">结束时间 {{pro.endTime | convertDate}}</p>-->
        <!--<p class="pro-time" v-if="pro.status==11">开拍时间 {{pro.startTime | convertDate}}</p>-->

        <p class="pro-time" v-if="pro.status==release&&pro.startTime<pro.timestamp&&pro.timestamp<pro.endTime">结束时间 {{pro.endTime | convertDate}}</p>
        <p class="pro-time" v-else-if="pro.status==release&&pro.startTime>pro.timestamp">开拍时间 {{pro.startTime | convertDate}}</p>
        <p class="pro-time" v-else>已结拍</p>

        <div class="pro-bid">
          <span>出价{{pro.bidTimes}}</span>
          <span>关注{{pro.followersNum}}</span>
          <span>浏览{{pro.viewTimes}}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
  import {ipconfig} from '../../../assets/js/ipconfig';
  export default {
    name: "productList",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
      }
    },
    props:["productList","release","fixedPrice","deal"],
    mounted(){
      // console.log(this.$refs.proList)
    },
  }
</script>

<style scoped>
  .pro-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #F2F2F2;
  }
  .pro-box{
    width: 49.5%;
    margin-bottom: 0.35rem;
    background-color: #ffffff;
    padding-bottom: 0.75rem;
  }
  .pro-img{
    display: block;
    position: relative;
    height: 49.5vw;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
  }
  .pro-body{
    padding: 0.35rem 0.5rem 0 0.5rem;
  }
  .pro-title{
    color: #282828;
    font-size: 0.75rem;
    /*line-height: 0.75rem;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*line-height: 1rem;*/
    /*height: 2rem;*/
    /*display: -webkit-box;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-line-clamp: 2;*/
    /*overflow: hidden;*/
  }
  .pro-price{
    color: #C50000;
    font-size: 0.6rem;
    line-height: 1.1rem;
    margin-top: 0.15rem;
  }
  .pro-time{
    color: #C3C3C3;
    font-size: 0.5rem;
    line-height: 1.1rem;
  }
  .pro-bid{
    margin-top: 0.1rem;
  }
  .pro-bid span{
    display: inline-block;
    padding: 0px 2px;
    font-size: 0.5rem;
    height: 0.6rem;
    line-height: 0.6rem;
    color: #C3C3C3;
    border: 1px #C3C3C3 solid;
    border-radius: 2px;
  }
</style>
